<template>
  <div class="bottom_nav">
    <div class="last" @click="handlePrev">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-anniu_jiantouxiangzuo"></use>
      </svg>
      <span>上一题</span>
    </div>
    <div class="scantron" @click="handleShowSheet">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-datiqia"></use>
      </svg>
      <span>答题卡</span>
    </div>
    <div class="submit" @click="handleSubmit">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-jiaojuan-04"></use>
      </svg>
      <span>交卷</span>
    </div>
    <div class="next" @click="handleNext">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-anniu-jiantouxiangyou"></use>
      </svg>
      <span>下一题</span>
    </div>
  </div>
</template>

<script>
import { inject } from "@vue/runtime-core";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    // 上一题
    const handlePrev = () => {
      store.commit("topic/handleTopicStatus", { type: "prev" });
      //   store.commit("topic/handleTopicStatus", {
      //     type: "topicIndex",
      //     value: store.state.topic.status.topicIndex - 1,
      //   });
    };
    // 下一题
    const handleNext = () => {
      store.commit("topic/handleTopicStatus", { type: "next" });
      //   store.commit("topic/handleTopicStatus", {
      //     type: "topicIndex",
      //     value: store.state.topic.status.topicIndex + 1,
      //   });
    };
    // 提交
    const handleSubmit = () => {
      store.commit("topic/handleReset");
    };
    // 答题卡
    const showShortPopup = inject("showShortPopup");
    const handleShowSheet = () => {
      showShortPopup();
    };
    return { handlePrev, handleNext, handleSubmit, handleShowSheet };
  },
};
</script>

<style lang="less" scoped>
.icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.bottom_nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 4rem;
  font-size: 0.8rem;
  background-color: #fff;
  box-shadow: 0 -4px 5px -4px #9e9e9e;
  div {
    display: flex;
    align-items: center;
    flex-direction: column;
    span {
      margin-top: 0.2rem;
    }
  }
  .disabled {
    opacity: 0.4;
  }
}
</style>
